From bd1e9ee212541c8f6236bea6256cad082b2ea35a Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 31 Aug 2022 13:50:03 -0700
Subject: hook up 2fa setting

---
 src/routes/[username]/settings/+page.svelte     |   2 +-
 src/routes/[username]/settings/_security.svelte | 101 ++++++++++++++++++++----
 2 files changed, 85 insertions(+), 18 deletions(-)

(limited to 'src/routes/[username]/settings')

diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index aa19c68f..8270ad51 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -30,7 +30,7 @@
 
 <AppHeader />
 
-<form on:submit|preventDefault={save}>
+<form on:submit|preventDefault={save} class="mb-20">
 	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 65f73a10..dd184fe4 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -1,18 +1,52 @@
 <script>
-  import { tick } from "svelte";
+	import { tick } from 'svelte';
 	import { t } from '$lib/translations';
-	import { Icon } from '$comp';
+	import { Icon, Qr } from '$comp';
 	import { Pincode, PincodeInput } from 'svelte-pincode';
 	import { user } from '$lib/store';
+	import { put, success, failure } from '$lib/utils';
+
+	let settingPin, setting2fa, disabling2fa;
 
-	let settingPin, setting2fa;
-	let togglePin = () => (settingPin = !settingPin);
-	let toggle2fa = () => (setting2fa = !setting2fa);
 	let code = [];
 	let pin = '';
-  let pinInput;
+	let token = '';
+	let tokenInput, pinInput;
+
+	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
+	$: if (setting2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
+
+	let togglePin = () => (settingPin = !settingPin);
+	let toggleEnabling = () => (setting2fa = !setting2fa);
+	let toggleDisabling = () => (disabling2fa = !disabling2fa);
 
-  $: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput)
+	$: enable2fa(token);
+	let enable2fa = async (twoFa) => {
+		try {
+			if (setting2fa && token.length === 6) {
+				await put('/enable2fa', { token });
+				success('2fa enabled');
+				$user.twofa = 1;
+        toggleEnabling();
+			}
+		} catch (e) {
+			failure('Failed to enable 2fa, try again');
+		}
+	};
+
+	$: disable2fa(token);
+	let disable2fa = async () => {
+		try {
+			if (disabling2fa && token.length === 6) {
+				await put('/disable2fa', { token });
+				success('2fa disabled');
+				$user.twofa = 0;
+        toggleDisabling();
+			}
+		} catch (e) {
+			failure('Failed to disable 2fa, try again');
+		}
+	};
 </script>
 
 <div>
@@ -23,8 +57,8 @@
 	{#if settingPin}
 		<div class="flex my-4">
 			<div class="mx-auto">
-        <Pincode bind:code bind:value={$user.pin} bind:this={pinInput}>
-          <PincodeInput />
+				<Pincode bind:code bind:value={$user.pin} bind:this={pinInput}>
+					<PincodeInput />
 					<PincodeInput />
 					<PincodeInput />
 					<PincodeInput />
@@ -55,16 +89,49 @@
 </div>
 
 {#if setting2fa}
-	QR
+	<Qr text={$user.otpsecret} />
+
+	<div class="text-center my-4">
+		{$t('user.settings.accountId')}<br />
+		<b>{$user.otpsecret}</b>
+	</div>
+	<div class="text-center my-4">
+		{$t('user.settings.oneTimeCode')}<br />
+		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+		</Pincode>
+	</div>
+{:else if disabling2fa}
+	<div class="text-center my-4">
+		{$t('user.settings.oneTimeCode')}<br />
+		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+		</Pincode>
+	</div>
 {:else}
-	<div>
-		<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
-		<p class="text-secondary mb-1">
-			{$t('user.settings.twofaDescription')}
-		</p>
-		<button type="button" class="primary">
+	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
+	<p class="text-secondary mb-1">
+		{$t('user.settings.twofaDescription')}
+	</p>
+	{#if $user.twofa}
+		<button type="button" class="primary" on:click={toggleDisabling}>
+			<Icon icon="mobile" style="mr-1" />
+			{$t('user.settings.twofaDisable')}
+		</button>
+	{:else}
+		<button type="button" class="primary" on:click={toggleEnabling}>
 			<Icon icon="mobile" style="mr-1" />
 			{$t('user.settings.twofaSetup')}
 		</button>
-	</div>
+	{/if}
 {/if}
-- 
cgit v1.2.3